const path = require('path');

const webpack = require('webpack');

const htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  // webpack4.x 可以省略 
  entry:{ 
    app:__dirname+'/src/index.js',//唯一入口文件,__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
  },
  output:{
    path: path.resolve(__dirname, './dist'),//打包后的文件存放的地方
    filename:'main.js'   //打包后输出文件的文件名
  },
  devServer: {
      open: true,
      port:3000,
      contentBase: './', //指定托管的根目录
      hot: true, //启用热更新第一步
  },
  plugins: [
      new webpack.HotModuleReplacementPlugin(), //启用热更新第2步
      new htmlWebpackPlugin({  //配置 index.html 缓存到内存
        template: path.join(__dirname, './index.html'),
        filename: 'index.html'
      })
  ],
  module: {
    rules:[
      { test: /\.css$/, use:['style-loader', 'css-loader'] },
      { test: /\.less$/, use:['style-loader','css-loader','less-loader']},
      { test: /\.scss$/, use:['style-loader','css-loader','sass-loader']},
      //url-loader 参数 
      //limit :图片小于这个值是，将图片转为base64  
      //name: 保留文件原名称 
      { test: /\.(jpg|png|gif|jpeg|bmp|JPG)$/, use:'url-loader?limit=50000&name=[hash:6]-[name].[png]'},
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use:'url-loader'},
    ]
  } 
};